<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><!--{$title}--></title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="<!--{$url_prefix}-->css/bootstrap.css" />
<link rel="stylesheet" href="<!--{$url_prefix}-->css/about.css" />
<link rel="stylesheet" href="<!--{$url_prefix}-->css/bootstrap-responsive.css" /><!-- 加入后变为响应式布局，去掉变为固定宽度布局 -->
<script src="<!--{$url_prefix}-->js/jquery.js"></script>
<script src="<!--{$url_prefix}-->js/bootstrap.js"></script>
<script src="<!--{$url_prefix}-->js/swipe.js"></script>
<!--[if lt IE 9]>
  <script src="/js/html5.js"></script>
<![endif]-->
<style>
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
/* Swipe 2 required styles */
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > figure {
  float:left;
  width:100%;
  position: relative;
}
/* END required styles */

</style>
<body>
<div class="container clearfix" id="home">
    <ul>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
        <li><a href="#">ATT首页</a></li>
    </ul>
</div>
<script>
$(document).ready(function(){
	new Swipe(document.getElementById('banner_box'), {
		speed:500,
		auto:3000,
		callback: function(){
			var lis = $(this.element).next("ol").children();
			lis.removeClass("on").eq(this.index).addClass("on");
		}
	});
});
</script>

</body>
</html>
